<template>
  <div id="product">
    <div class="listGroup">
      <div>
        <a style="display: block;">
        <div class="listItem">
          <p><img src="" /></p>
          <div class="describe">
            <div class="left">
              <h3></h3>
              <p class="qixian"><span></span>　　<span></span></p>
              <p class="lableGroup">
                <span class="lable"></span>
              </p>
            </div>
            <div class="right">
              <p></p>
              <p>预期收益</p>
            </div>
          </div>
        </div>
        </a>
      </div>
    </div>
  </div>  
</template>
<style scoped>
* {
  color: #333;
}

html {
  background: rgba(242, 242, 242, 1);
}

.listItem {
  width: 95%;

  height: 200px;

  background: #fff;

  margin: 0 auto;

  margin-top: 10px;

  border-radius: 4px;

  box-shadow: 1px 1px 6px #bbb;
}

.listItem > p {
  width: 100%;

  height: 60%;

  text-align: center;
}

.listItem > p > img {
  width: 97%;

  height: 100%;

  margin-top: 1.5%;
}

.describe {
  margin: 1.5%;

  display: flex;

  flex-direction: row;
}

.left {
  min-height: 20%;

  flex: 3;
}

.right {
  min-height: 20%;

  flex: 1;
}

.right > p:nth-child(1) {
  font-size: 18px;

  color: #e60012;
}

.right > p:nth-child(2) {
  font-size: 10px;
}

h3 {
  font-size: 15px;

  color: #333;

  height: 24px;

  line-height: 24px;
}

.qixian {
  font-size: 10px;

  margin: 0;

  padding: 0;
}

.lableGroup {
  width: 100%;

  height: auto;

  font-size: 10px;

  display: flex;

  flex-direction: row;
}

.lable {
  text-align: center;

  display: inline-block;

  min-width: 20%;

  background: #cccc77;

  margin: 7px 2%;

  color: #ffffff;
}

.lable:nth-child(1) {
  margin-left: 0;

  background: #fa6003;
}

.lable:nth-child(2) {
  margin-left: 0;

  background: #49bef3;
}

.lable:nth-child(3) {
  margin-left: 0;

  background: #fa2855;
}

.lable:nth-child(4) {
  margin-left: 0;

  background: #c8af09;
}
</style>

